<template>
  <div>
    <navigate />
    <van-search
      v-model="subject"
      @search="onSearch"
    />
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list v-model="loading" :finished="finished" @load="onLoad">
        <card-list
          v-for="(item,index) in list"
          :key="item.id+index"
          :title="item.procDefName"
          :desc="item.subject"
          :date="item.createTime|formatTime"
          :tag="_getStatus(item.status)"
          :tag-type="_getStatusType(item.status)"
          :bg-color="_randomColor(item.procDefName)"
          :icon="_randomIcon(item.procDefName)"
          is-link
          @click="onClick(item)"/>
        <list-result-page
          :result-type="resultType"
          :error-type="errorType"
          :result-message="resultMessage"/>
      </van-list>
    </van-pull-refresh>
  </div>
</template>
<script>
import Navigate from '@/components/LcControl/nav'
import CardList from '@/components/CardList'
import ListResultPage from '@/components/ListResultPage'

import { myDraft } from '@/api/platform/bpmn/bpmn'
import { formatParams, loadFinished, getResultType } from '@/utils/params'
import random from '@/mixins/random'
import bpmnStatus from '@/mixins/bpmnStatus'

export default {
  components: {
    CardList,
    ListResultPage,
    Navigate
  },
  mixins: [random, bpmnStatus],
  data() {
    return {
      subject: '',
      list: [],
      page: 1,
      loading: false,
      finished: false,
      isLoading: true,
      resultType: 'init',
      errorType: null,
      resultMessage: null
    }
  },
  methods: {
    getData() {
      const params = formatParams({ 'Q^subject_^SL': this.subject }, { 'page': this.page })
      myDraft(params).then(response => {
        if (this.$utils.isNotEmpty(response.data.dataResult)) {
          this.page++
          this.list = this.list.concat(response.data.dataResult)
          this.finished = false
        }
        this.finished = !!loadFinished(response.data.pageResult)
        this.loading = false
        this.isLoading = false
        // 结果类型
        this.resultType = getResultType(this.list, this.finished)
      }).catch((e) => {
        this.loading = false
        this.isLoading = false
        this.finished = true
        this.resultType = 'error'
        this.resultMessage = e.message
      })
    },
    onSearch() {
      this.resultType = 'init'
      this.page = 1
      this.list = []
      this.getData()
    },
    onLoad() {
      this.getData()
    },
    onRefresh() {
      this.resultType = 'init'
      this.isLoading = true
      this.page = 1
      this.list = []
      this.getData()
    },
    onClick(item) {
      this.$router.push({
        name: 'bpmnForm',
        query: {
          proInstId: item.id,
          defId: item.procDefId
        },
        params: {
          title: item.procDefName
        }
      })
    }
  }

}
</script>
